<!DOCTYPE html>
<html lang="en">

<head>
    <title>个人中心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <link href="../../css/public.css" rel="stylesheet">
    <style>
        .personal_Info {
            height: 40%;
            background: url(../../images/personal/bg_head.png) center 0 no-repeat;
            background-size: 100% 100%;
        }
        .personal_Info a{
            padding-top: 17%;
            display: block;
        }
        .user-logo {
            display: block;
            margin: auto;
             width: 2.3rem;
             height: 2.3rem;
             border-radius: 100%;
        }

        .user-name {
            text-align: center;
            margin-top: 10px;
            font-size: .4rem;
            color: #D0D2F7;
        }

        .info_list{
            height: 180px;
            background: url(../../images/personal/bg_bottom.png) center 0 no-repeat;
            background-size: 100% 95%;
            margin-top: 10px;
        }
        .info_list a{
            color: #D0C7EF;
            font-size: .4rem;
        }
        .info_list>div{
            height:45px;
            border-bottom:1px solid #201d61;
           line-height: 45px;
           overflow: hidden;
           padding-left: 3%;
           color: #D0C7EF ;
           font-size: .4rem;
           background: url(../../images/personal/icon_back.png) 95% center no-repeat;
            background-size: .3rem; 
        }
        .info_list img{
            width: .6rem;
            vertical-align: middle;
            margin-right: 5px;
        }
        .info_list .banlance{
            padding-top: 20px;
            background-image: none;
        }
        .gold{
            float: right;
            margin-right: 10px;
            color: #FFCD29 ;
            margin-right: 8%;
        }
        .phone_number,.changePassword,.card{
            float: right;
            color: #EAE3FF  ;
            padding-right: 12%;
        }   
        .info_list .password{
            border: 0;
        } 
        .nav .personal span{
            color:#FFB400;
        }
        body{
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="personal_Info">
        <a href="./personalInfo.html">
            <img class="user-logo" src="../../images/personal/image_portrait.png" alt="">
            <div class="user-name">LYLSP_288544</div>
        </a>
        
    </div>
    <div class="info_list">
        <div class="banlance">
            <img style="margin:0;" src="../../images/personal/icon_pay.png" alt=""> 账户余额
            <span class="gold"><img src="../../images/rank/icon_gold.png" alt=""> <a class="accoun_balance">0</a> </span>
        </div>
        <div class="phone">
                <img src="../../images/personal/icon_Phone.png" alt=""> 手机
                    <a class="phone_number" >18750801400</a>
            
        </div>
        <!-- <div>
             <img src="../../images/personal/icon_card.png" alt=""> 绑定银行卡
            <a class="card" href="./bindCard.html">
                去绑定
            </a>
        </div> -->
        <div class="password">
              <img src="../../images/personal/icon_password.png" alt=""> 密码
                <a class="changePassword" >修改</a>
        </div>
    </div>
    <div class="nav">
        <a class="home" href="../home/home.html">
            <img src="../../images/nav/icon_home.png" alt="">
            <br>
            <span>首页</span>
        </a>
        <!-- <a><a href="">赛事</a></a> -->
        <a class="rank" href="../rank/rank_home.html">
            <img src="../../images/nav/icon_ranking list.png" alt="">
            <br>
            <span>排行榜</span>
        </a>
        <a class="pay" href="../eSports/eSports.html">
            <img src="../../images/nav/icon_Pay.png" alt=""><br>
        <span href="">电子竞技</span>
    </a>
        <a class="personal" href="../personal/personal.html">
            <img src="../../images/nav/icon_user_active.png" alt="">
            <br>
            <span>个人中心</span>
        </a>
    </div>
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/public.js"></script> 
    <script>
   $(function(){
       let phone
    $.post(userInfoUrl, (res) => {
       console.log(res)
    let userInfo=res.obj 
    let balance = userInfo.fdOver, 
        name = userInfo.fdNickname,
        logoUrl = userInfo.fdAvatarUrl
        phone =userInfo.fdMobile
        
        $('.user-logo').attr('src',logoUrl)
        $('.phone_number').text(phone)
        $('.user-name').text(name)
        $('.accoun_balance').text(balance)
   })

   $('.password').click(()=>{
    window.location.href='./changePassword.html'
   })
   $('.phone').click(()=>{
    window.location.href='./changePhone.html?phone='+phone
   })
   })


   
     
    </script>   
</body>

</html>